﻿<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title></title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 报表统计 <span class="c-gray en">&gt;</span> 销售总额统计 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
	<div class="text-c">
		统计维度：
		<span class="select-box inline">
			<select name="time_cycle" id="time_cycle" class="select">
				<option value="year"> 年 </option>
				<option value="month"> 月 </option>
				<option value="day" selected="selected"> 日 </option>
			</select>
		</span> 
		
		<span class="date_scope">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			日期范围：
			<span class="select-box inline">
				年：
				<select name="date_scope_year" id="date_scope_year" class="select">
					
				</select>
				
				<span class="date_scope_month">&nbsp;&nbsp;
					月：
					<select name="date_scope_month" id="date_scope_month" class="select">
						
					</select>
				</span>
			</span> 
		</span>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<!-- <input type="text" name="" id="" placeholder=" 资讯名称" style="width:250px" class="input-text"> -->
		<button name="loadData" id="loadData" class="btn btn-success" type="button"><i class="Hui-iconfont">&#xe692;</i> 重新生成报表</button>
	</div>
	<div class="mt-20">
		<div id="container" style="min-width:400px;height:400px"></div>
	</div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="static/h-ui.admin/js/common.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/utils.js"></script>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
	//初始化报表筛选日期维度数据
	initReportCondition();
	
	//日期联动
	$(document).on("change","#date_scope_year",function(){  
		loadDateScopeMonth($(this).val());
	});
	//日期联动
	$(document).on("change","#time_cycle",function(){  
		var val = $(this).val();
		if(val=="year"){
			$(".date_scope").hide();
		}else if(val=="month"){
			$(".date_scope").show();
			$(".date_scope_month").hide();
		}else if(val=="day"){
			$(".date_scope").show();
			$(".date_scope_month").show();
		}
	});
	//重新生成报表
	$(document).on("click","#loadData",function(){  
		loadData();
	});
	
    
});
var initReportConditionRes;
function initReportCondition(){
	var url = "/report/groupByYearMonthDay";
	common.getData(url,function(data){
		initReportConditionRes = data.result.resYearMoth;
		var html="";
		$.each(initReportConditionRes,function(key,val){     
			html='<option value="'+key+'"> '+key+' </option>'+html; 
		});  
		$("#date_scope_year").html(html);
		loadDateScopeMonth($("#date_scope_year").val());
	});
}
function loadDateScopeMonth(year){
	var list = initReportConditionRes[year];
	var html="";
	$.each(list,function(){     
		html='<option value="'+this+'"> '+this+' </option>'+html; 
	}); 
	$("#date_scope_month").html(html);
}

function loadData(){
	var timeCycle = $("#time_cycle").val();
	var year = $("#date_scope_year").val();
	var month = $("#date_scope_month").val();
	var url = "/report/getDataGroupByCycle?timeCycle="+timeCycle+"&year="+year+"&month="+month;
	common.getData(url,function(data){
		var resMap = data.result;
		var x = resMap.x;
		var y = resMap.y;
		//res = [0,12.0,0,0,0,0];
		debugger;
		var cycle = "年";
		if(timeCycle=="year"){
			cycle = "年";
		}else if(timeCycle=="month"){
			cycle = "月";
		}else if(timeCycle=="day"){
			cycle = "日";
		}
		$('#container').highcharts({
			chart: {
				plotBorderWidth: 1,
				marginLeft: 80
			},
			credits: {
				enabled: false
			},
			navigation: {
				buttonOptions: {
					enabled: false
				}
			},
			title: {
				text: '销售总额统计',
				style: {
					"font-size": '16px',
					"font-weight": 'bold'
				}
			},
			xAxis: {
				categories:x,
				title:{
					text: cycle
				}
			},
			yAxis: {
				type: 'logarithmic',
				minorTickInterval: 1,
				max:10000,
				title:{
					text: "总额"
				}
			},
			series: [{
				data:y,
				pointStart: 0,
				name:"总额/"+cycle
			}]
		});
	});
	
	
}


</script> 
</body>
</html>